<template>
    <div class="bigshare">
        <header>
            <span @click="$back()">
                <el-icon color="#fff" size="18">
                    <ArrowLeftBold />
                </el-icon>
            </span>
            <strong>{{ $t("language.Share.name") }}</strong>
            <span @click="$openPage('/kefu')"><NuxtImg src="/img/kefu.png" alt="" /></span>
        </header>
        <div class="Share">
            <dl>
                <dd v-for="(item, index) in btnlist" @click="changeindex(item, index)" :key="index">
                    <div class="dd-item" :class="btnactive == index ? 'active' : ''">
                        <NuxtImg v-if="btnactive != index" :src="item.img" alt="" />
                        <NuxtImg v-else :src="item.imgactive" alt="" />
                    </div>
                    <span :class="btnactive == index ? 'activefont' : ''">{{
                $t(item.lang)
            }}</span>
                </dd>
            </dl>

            <component :is="iscomponent" :loading="loading" />
        </div>
    </div>
</template>

<script setup lang="ts">
definePageMeta({
    layout: 'layout',
})
import { reactive, nextTick, markRaw, onMounted, defineAsyncComponent, ref, shallowRef } from "vue";
import { ArrowLeftBold } from '@element-plus/icons-vue'
let myinfo = markRaw(defineAsyncComponent(() => import("./Share/components/MyInfo.vue")))
let detail = markRaw(defineAsyncComponent(() => import("./Share/components/Detail.vue")))
let tables = markRaw(defineAsyncComponent(() => import("./Share/components/Table.vue")));
let totor = markRaw(defineAsyncComponent(() => import("./Share/components/Tutor.vue")));
let leader = markRaw(defineAsyncComponent(() => import("./Share/components/Leader.vue")));
let guide = markRaw(defineAsyncComponent(() => import("./Share/components/Guide.vue")));
let btnactive = shallowRef<number>(0);
let iscomponent = myinfo;
let loading = shallowRef<boolean>(true);
onMounted(() => {
    nextTick(() => {
        // loading.value = false;
        let time = setInterval(() => {
            loading.value = false;
            clearInterval(time);
        }, 500);
    });
});

//   const getImg = (url) => {
//     return new URL(`../../assets/img/${url}`, import.meta.url).href;
//   };
let changeindex = (item: any, index: number) => {
    btnactive.value = index;
    iscomponent = item.component;
};
let btnlist = reactive<{ lang: string, img: string, imgactive: string, component: any }[]>([
    {
        lang: "language.Share.btn1",
        img: "/img/re1.png",
        imgactive: "/img/re1l.png",
        component: myinfo,
    },
    {
        lang: "language.Share.btn2",
        img: "/img/re2.png",
        imgactive: "/img/re2l.png",
        component: totor,
    },
    {
        lang: "language.Share.btn3",
        img: "/img/re3.png",
        imgactive: "/img/re3l.png",
        component: detail,
    },
    {
        lang: "language.Share.btn4",
        img: "/img/re4.png",
        imgactive: "/img/re4l.png",
        component: tables,
    },
    {
        lang: "language.Share.btn5",
        img: "/img/re5.png",
        imgactive: "/img/re5l.png",
        component: leader,
    },
    {
        lang: "language.Share.btn6",
        img: "/img/re6.png",
        imgactive: "/img/re6l.png",
        component: guide,
    },
]);
</script>
<style scoped lang="scss">
.bigshare {
    width: 100vw;

    @include flex(column, flex-start, center);

    header {
        width: 100%;
        height: 45px;
        position: fixed;
        left: 0;
        z-index: 7;
        top: 0;
        @include flex(row, space-between, center);
        background-color: rgb(36, 39, 43);
        padding: 0 20px;
        color: #fff;

        span {
            display: block;
            height: 28px;
            width: 28px;
            line-height: 28px;
            @include flex(row, flex-start, center);
            cursor: pointer;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    .Share {
        background-color: #1a1a1a;
        padding: 55px 0px 90px;
        width: 100%;
        background-color: rgb(26, 26, 26);

        &::-webkit-scrollbar {
            width: 0;
            height: 0;
            display: none;
        }



        dl {
            overflow-x: scroll;
            width: 100%;

            &::-webkit-scrollbar {
                width: 0;
                height: 0;
                display: none;
            }

            @include flex(row, space-between, center);
            flex-wrap: nowrap;
            height: 110px;

            dd {
                height: 100px;
                min-width: 80px;
                cursor: pointer;
                width: 80px;
                @include flex(column, flex-start, center);

                .dd-item {
                    width: 54px;
                    height: 54px;

                    border: 2px solid #0a906c;
                    @include flex(row, center, center);
                    border-radius: 10px;

                    img {
                        width: 25px;
                        height: 25px;
                    }
                }

                .active {
                    background: #0a906c;
                }

                .activefont {
                    font-weight: bold;
                }

                span {
                    width: 100px;
                    display: block;
                    color: #0a906c;
                    font-size: 13px;
                    padding-top: 10px;
                    white-space: wrap;
                    text-align: center;
                }
            }
        }
    }
}
</style>